<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="tab-section">
			<template v-for="tab in statusList" :key="tab.id">
				<view 
					:class="{ 'tab-item': true, 'tab-item__actived': activeStatus === tab.id }"
					@click="handleStatusChange(tab.id)">
					<text>{{ tab.name }}</text>
				</view>
			</template>
		</view>
		
		<!-- 订单列表 -->
		<view class="content-section">
			<view v-for="order in filteredOrders" :key="order.id" class="order-card">
				<view class="order-card__header">
					<text class="order-card__status">{{ getStatusText(order.orderStatus) }}</text>
					<text class="order-card__date">{{ order.orderDate }}</text>
				</view>
				<view class="order-card__content">
					<image :src="order.clothesPic" class="order-card__image" />
					<view class="order-card__info">
						<text class="order-card__sn">订单号: {{ order.orderSn }}</text>
						<text class="order-card__amount">总金额: {{ order.totalAmount }}</text>
					</view>
				</view>
				<view class="order-card__footer">
					<text class="order-card__service">服务类型: {{ getServiceTypeText(order.serviceType) }}</text>
					<text class="order-card__detail" @click="goToOrderDetail(order.id)">查看详情</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getOrderList } from '@/api/http/orderList'
import { Order } from '@/api/types/order'

const userId = uni.getStorageSync('userId')
const activeStatus = ref(1) // 默认显示全部状态

// 定义状态导航数据
const statusList = ref([
	{ id: 1, name: '全部' },
	{ id: 2, name: '待付款' },
	{ id: 3, name: '已付款' },
	{ id: 4, name: '进行中' },
	{ id: 5, name: '已完成' },
	{ id: 6, name: '已取消' }
])

// 订单数据存储
let orders = ref<Order.orderType[]>([])

// 根据状态筛选订单
const filteredOrders = computed(() => {
	if (activeStatus.value === 1) {
		return orders.value
	}
	return orders.value.filter(order => order.orderStatus === activeStatus.value)
})

// 获取订单状态文本
const getStatusText = (status: number) => {
	switch (status) {
		case 0:
			return '待支付'
		case 1:
			return '已支付-服务未开始'
		case 2:
			return '已支付-服务中'
		case 3:
			return '已支付-服务完成'
		case 4:
			return '取消支付'
		case 5:
			return '用户退款'
		default:
			return '未知状态'
	}
}

// 获取服务类型文本
const getServiceTypeText = (serviceType: number) => {
	switch (serviceType) {
		case 1:
			return '到店服务'
		case 2:
			return '顺丰上门'
		default:
			return '未知服务'
	}
}

// 跳转到订单详情页
const goToOrderDetail = (orderId: number) => {
	uni.navigateTo({
		url: `/pages/order/detail?id=${orderId}`
	})
}

// 处理状态切换
const handleStatusChange = async (statusId: number) => {
	activeStatus.value = statusId
	await fetchOrders(userId) // 获取订单数据
}

// 获取订单数据
const fetchOrders = async (userId: number) => {
	try {
	  const data = await getOrderList(userId); // 等待异步操作完成
	  orders.value = data || [];
	} catch (error) {
	  console.error('Failed to fetch orders:', error);
	  orders.value = []; // 确保 orders.value 是一个数组
	}
};

// 初始化加载数据
onMounted(async () => {
	await fetchOrders(userId)
})
</script>

<style scoped lang="scss">
	// 定义变量
	$uni-text-color-grey: #999;
	$uni-text-color: #333; // 你可以根据需要调整颜色值
	.container {
		.tab-section {
			position: fixed;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			width: 100%;
			height: 80rpx;
			background-color: #fff;
			z-index: 1000;
			
			&:after {
				content: "";
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 0; // 移除下划线
			}
			
			.tab-item {
				flex: 1;
				text-align: center;
				font-size: 30rpx;
				color: $uni-text-color;
				height: 60rpx;
				line-height: 60rpx;
				font-weight: bold;
				padding: 10rpx 0; // 增加内边距
				transition: background-color 0.3s ease, color 0.3s ease;

				&.tab-item__actived {
					color: #fff; // 选中状态文字颜色
					background-color: $uni-primary; // 选中状态背景色
					border-radius: 4rpx 4rpx 0 0; // 圆角处理
				}
			}
		}
	
	.content-section {
		margin-top: 80rpx; // 与导航栏高度一致
		height: calc(100vh - 80rpx);
		overflow-y: auto;
		padding: 20rpx;
	}

	.order-card {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: transform 0.2s ease, box-shadow 0.2s ease;

		&:hover {
			transform: translateY(-4rpx);
			box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15);
		}

		&__header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
		}

		&__status {
			font-size: 28rpx;
			color: $uni-primary;
		}

		&__date {
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}

		&__content {
			display: flex;
			align-items: center;
		}

		&__image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		&__info {
			flex: 1;
		}

		&__sn {
			font-size: 28rpx;
			color: $uni-text-color;
		}

		&__amount {
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}

		&__footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
		}

		&__service {
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}

		&__detail {
			font-size: 24rpx;
			color: $uni-primary;
			text-decoration: underline;
		}
	}
}
</style>